<template>
  <div class="quote-container" :class="{ 'my-quote': isMyMessage }">
    <div class="quote-header">
      <span v-if="!isMyMessage" class="quote-avatar">
        <img :src="message.quotedSenderAvatar || defaultAvatar" />
      </span>
      <span class="quote-sender">{{ message.quotedSenderNickname || "未知用户" }}</span>
    </div>
    <div class="quote-content">
      <template v-if="message.quotedMessageType === MESSAGE_TYPES.TEXT">
        {{ message.quotedMessageSummary }}
      </template>
      <template v-else-if="message.quotedMessageType === MESSAGE_TYPES.IMAGE">
        <i class="el-icon-picture"></i> [图片]
      </template>
      <template v-else-if="message.quotedMessageType === MESSAGE_TYPES.VOICE_MSG">
        <i class="el-icon-microphone"></i>
        [语音 {{ message.quotedMessageDuration || "0" }}秒]
      </template>
      <template v-else-if="message.quotedMessageType === MESSAGE_TYPES.FILE">
        <i class="el-icon-document"></i>
        {{ message.quotedMessageSummary }}
      </template>
      <template v-else-if="message.quotedMessageType === MESSAGE_TYPES.APP_LINK">
        <i class="el-icon-link"></i>
        [链接] {{ message.quotedMessageSummary }}
      </template>
      <template v-else>
        {{ message.quotedMessageSummary || "[消息]" }}
      </template>
    </div>
  </div>
</template>

<script>
import { MESSAGE_TYPES } from '@/constants/messageTypes';

export default {
  name: 'QuoteMessage',
  props: {
    message: {
      type: Object,
      required: true
    },
    defaultAvatar: {
      type: String,
      default: ''
    },
    isMyMessage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      MESSAGE_TYPES: {
        TEXT: 0,
        IMAGE: 1,
        FILE: 2,
        VOICE_MSG: 6,
        APP_LINK: 10
      }
    };
  }
};
</script>

<style scoped>
.quote-container {
  border-left: 2px solid #ccc;
  padding-left: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  color: #666;
}

.my-quote {
  border-left-color: #8daee5;
}

.quote-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.quote-avatar img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 5px;
}

.quote-sender {
  font-weight: 500;
  margin-right: 5px;
  font-size: 12px;
}

.quote-content {
  line-height: 1.4;
}
</style>
